<!--
 * @Description: 登录组件
 -->
<template>
  <div id="myLogin">
    <el-dialog title="登录" width="400px" center :visible.sync="isLogin" >

      <!--   短信登录方式   -->
      <div v-if="value1">
       <!-- key和 v-model绑定的值要一样，不然form对象不知渲染谁
       rules绑定验证规则；ref指定当前的form对象的是谁
       -->
      <el-form key="LoginUser"  :model="LoginUser" :rules="rules1" status-icon ref="LoginUser" class="demo-ruleForm">
        <el-form-item prop="phoneNumber">
          <el-input prefix-icon="el-icon-mobile-phone" placeholder="请输入电话号码" v-model="LoginUser.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            prefix-icon="el-icon-lock"
            placeholder="请输入验证码"
            v-model="LoginUser.code"
          >
            <el-button slot="append" size="medium" type="primary" @click="getCode"  :disabled="LoginUser.isDisabled" style="width:20%">{{LoginUser.buttonName}}</el-button>
          </el-input>
        </el-form-item>
        <el-form-item >
          <el-button size="medium" type="primary" @click="SMSLogin" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
      </div>

      <!--   默认登录方式   -->
      <!-- key和 v-model绑定的值要一样，不然form对象不知渲染谁
       rules绑定验证规则；ref指定当前的form对象的是谁
       -->
      <div v-else>
      <el-form   key="ruleForm"  :model="LoginUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="LoginUser.name"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
                  prefix-icon="el-icon-lock"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                  v-model="LoginUser.pass"
          ></el-input>
        </el-form-item>
        <el-form-item >
          <el-button size="medium" type="primary" @click="Login" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
      </div>
      <el-switch
              right
              v-model="value1"
              inactive-text="默认登录"
              active-text="短信验证码登录">
      </el-switch>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "MyLogin",
  data() {
    // 用户名的校验方法
    let validateName = (rule, value, callback) => {
      if (!value) {
          return callback(new Error("请输入用户名"));
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
      const passwordRule = /^[a-zA-Z]\w{5,17}$/;
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(
          new Error("字母开头,长度6-18之间,允许字母数字和下划线")
        );
      }
    };
    //电话号码验证
    let validatePhoneNumber=(rule, value, callback)=>{
        if (value === "") {
            return callback(new Error("请输入电话号码"));
        }
        // 电话的长度由11个数字组成
        const passwordRule = /^1[3456789]\d{9}$/;
        if (passwordRule.test(value)) {
            this.$refs.LoginUser.validateField("checkPass");
            return callback();
        } else {
            return callback(
                new Error("请输入正确的电话号码！")
            );
        }
    };
    //验证码对比验证
    let validateCode=(rule, value, callback)=>{
        if (value == "") {
            return callback();
        }
        // 获取后台验证码，进行对比操作
        const passwordRule = this.LoginUser.testCode;
        if (passwordRule==this.LoginUser.code) {
            this.$refs.LoginUser.validateField("checkPass");
            return callback();
        }
        else {
            return callback(
                new Error("验证码输入有误！")
            );
        }
      };
    return {
      value1:false,
      LoginUser: {
        name: "",/*用户名*/
        pass: "",/*密码*/
        phoneNumber:"",/*电话号码*/
        code:"",/*前端输入的验证*/
        testCode:"",/*后端传来的验证码*/
        buttonName: "获取验证码",
        isDisabled: false,/*获取验证从文字变为数字*/
        time: 60/*获取验证到计时间*/
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      /*默认登录方式验证规则*/
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],

      },
      /*短信登录方式验证规则*/
      rules1: {
        phoneNumber:[{ validator: validatePhoneNumber, trigger: "blur" }],
        code:[{ validator: validateCode, trigger: "blur" }]
          }
    };
  },
  computed: {
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        if(this.$refs["ruleForm"]!=undefined) {
            this.$refs.ruleForm.resetFields();
            this.setShowLogin(val);
        }
        if(this.$refs["ruleForm"]==undefined&&this.$refs.LoginUser!=undefined){
            this.$refs.LoginUser.resetFields();
            this.setShowLogin(val);
        }
      }
    },
    isLogin1: {
          get() {
              return this.$store.getters.getShowLogin;
          },
          set(val) {
              this.$refs.LoginUser.resetFields();
              this.setShowLogin(val);
          }
      }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin"]),
    /*默认登录方式：
    * 登录操作
    * */
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(valid => {
        //如果通过校验开始登录
        if (valid) {
          this.$axios({
                  url:"/api/user/login/"+this.LoginUser.name+"/"+ this.LoginUser.pass
              }).then(res => {
              //
              if (res.data!=null && res.data!=[] && res.data!="") {
                // 隐藏登录组件
                this.isLogin = false;
                // 登录信息存到本地
                let user = JSON.stringify(res.data);
                localStorage.setItem("user", user);
                // 登录信息存到vuex
                  this.setUser(res.data);
                // 弹出通知框提示登录成功信息
                this.notifySucceed("登录成功！");
              } else {
                // 清空输入框的校验状态
                this.$refs["ruleForm"].resetFields();
                // 弹出通知框提示登录失败信息
                this.notifyError("用户名或者密码不正确，请重新登录！");
              }
            })
            .catch(err => {
              return Promise.reject(err);
            });
        }
      });
    },
   /*短信登录方式：
    * 登录操作
    * */
    SMSLogin(){
        // 通过element自定义表单校验规则，校验用户输入的信息
        this.$refs["LoginUser"].validate(valid => {
            //如果通过校验开始登录
            if (valid) {
                this.$axios.post("/api/user/SMSLogin",{
                    phoneNumber: this.LoginUser.phoneNumber
                }).then(res => {
                    // 返回的信息不为空、null、空数组就进行以下操作
                    if (res.data!=null && res.data!=[] && res.data!="") {
                        // 隐藏登录组件
                        this.isLogin1 = false;
                        // 登录信息存到本地
                        let user = JSON.stringify(res.data);
                        localStorage.setItem("user", user);
                        // 登录信息存到vuex
                        this.setUser(res.data);
                        // 弹出通知框提示登录成功信息
                        this.notifySucceed("登录成功！");
                    } else {
                        // 清空输入框的校验状态
                        this.$refs["LoginUser"].resetFields();
                        // 弹出通知框提示登录失败信息
                        this.notifyError("登录失败，请重新登录！");
                    }
                })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            }
        });
    },
    /*短信登录方式：
    * 获取验证码方式
    * */
    getCode() {
        // 电话的长度由11个数字组成
        const passwordRule = /^1[3456789]\d{9}$/;
        //判断用户是否输入了正确电话号码，若输入了，再点击发送短信验证码的，则进行以下操作
        if (this.LoginUser.phoneNumber != "" && passwordRule.test(this.LoginUser.phoneNumber)) {
            //60秒倒计时
            let me = this.LoginUser;
            me.isDisabled = true;
            let interval = window.setInterval(function () {
                me.buttonName = '（' + me.time + '秒）后重新发送';
                --me.time;
                if (me.time < 0) {
                    me.buttonName = "获取验证码";
                    me.time = 60;
                    me.isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);
            //访问后端，进行获取验证码操作
            this.$axios
                .post("/api/user/sendCode", {
                    PhoneNumber: this.LoginUser.phoneNumber,
                })
                .then(res => {
                    // “发送短信失败”代表获取验证码失败
                    if (res.data == "发送短信失败") {
                        // 弹出通知框提示注册失败信息
                        this.notifyError("该电话号码还未登记，请登录进行登记！");
                    } else {
                        this.LoginUser.testCode = res.data
                    }
                })
                .catch(err => {
                    return Promise.reject(err);
                });
        }
    }
  }

};
</script>
<style>
</style>